// 样式-边框
import React, { useEffect, useState } from 'react';
import FormItem from 'antd/lib/form/FormItem';
import { filterObjectNullKeys } from 'src/libs/utils';
import { InputNumber, Select } from 'antd';
import InputColorPicker from './InputColorPicker';

interface IProps {
	config: any;
	onValuesChange: ( chartType: string, key: string, values: Object, configType: string ) => void;
	form: any;
}

const Border = ( props: IProps ) => {
	const { config, onValuesChange, form } = props;
	const { Option } = Select;
	const [ borderColor, setBorderColor ] = useState( ( config.style && config.style.chartBorderColor ) || 'rgba(134,188,37,1)' );
	const [ boxShadowColor, setBoxShadowColor ] = useState( ( config.style && config.style.chartBorderShadowColor ) || 'rgba(134,188,37,1)' );

	// console.log( props );

	const handleChangeBorderColorComplete = ( color ) => {
		setBorderColor( color );
		form.setFieldsValue( { chartBorderColor: color } );
		onValuesChange( config.type, config.key, filterObjectNullKeys( form.getFieldsValue() ) , 'style' );
	};

	const handleChangeBoxShadowColorComplete = ( color ) => {
		setBoxShadowColor( color );
		form.setFieldsValue( { chartBorderShadowColor: color } );
		onValuesChange( config.type, config.key, filterObjectNullKeys( form.getFieldsValue() ), 'style'  );
	};

	useEffect( () => {
		setBorderColor( ( config.style && config.style.chartBorderColor ) || 'rgba(134,188,37,1)' );
		setBoxShadowColor( ( config.style && config.style.chartBorderShadowColor ) || 'rgba(134,188,37,1)' );
	} ,[ config ] );

	// console.log( config );
	const onBlur = () => {
		onValuesChange( config.type, config.key, filterObjectNullKeys( form.getFieldsValue() ), 'style' );
	};

	return (
		<div>
			<FormItem label="圆角" name="chartBorderRadius" labelAlign="left" labelCol={{ span: 8 }} wrapperCol={{ span: 16 }}>
				<InputNumber onBlur={onBlur} onPressEnter={onBlur} style={{ width: '100%' }} placeholder="Enter生效, 单位px" />
			</FormItem>
			<FormItem label="宽度" name="chartBorderWidth" labelAlign="left" labelCol={{ span: 8 }} wrapperCol={{ span: 16 }}>
				<InputNumber onBlur={onBlur} onPressEnter={onBlur} style={{ width: '100%' }} placeholder="Enter生效, 单位px" />
			</FormItem>
			<FormItem label="边框样式" name="chartBorderStyle" labelAlign="left" labelCol={{ span: 8 }} wrapperCol={{ span: 16 }}>
				<Select>
					<Option value="solid">实线</Option>
					<Option value="dashed">虚线</Option>
					<Option value="dotted">点状</Option>
					<Option value="double">双线</Option>
				</Select>
			</FormItem>
			<FormItem label="边框颜色" name="chartBorderColor" labelAlign="left" labelCol={{ span: 8 }} wrapperCol={{ span: 16 }}>
				<InputColorPicker
					color={borderColor}
					change={handleChangeBorderColorComplete}
				></InputColorPicker>
			</FormItem>
			<FormItem label="阴影宽度" name="chartBorderShadowWidth" labelAlign="left" labelCol={{ span: 8 }} wrapperCol={{ span: 16 }}>
				<InputNumber onBlur={onBlur} onPressEnter={onBlur} style={{ width: '100%' }} placeholder="Enter生效, 单位px" />
			</FormItem>
			<FormItem label="阴影偏移" name="chartBorderShadowDeviation" labelAlign="left" labelCol={{ span: 8 }} wrapperCol={{ span: 16 }}>
				<InputNumber onBlur={onBlur} onPressEnter={onBlur} style={{ width: '100%' }} placeholder="Enter生效, 单位px" />
			</FormItem>
			<FormItem label="阴影颜色" name="chartBorderShadowColor" labelAlign="left" labelCol={{ span: 8 }} wrapperCol={{ span: 16 }}>
				<InputColorPicker
					color={boxShadowColor}
					change={handleChangeBoxShadowColorComplete}
				></InputColorPicker>
			</FormItem>
		</div>
	);
};

export default React.memo( Border );
